<template>
  <div class="app-container">
    <div style="    position: relative;">
      <el-button style="margin-bottom:10px;position: relative;right: -83%;" type="primary" size="mini" @click="toadd()">添加</el-button>
      <el-button style="margin-bottom:10px;;position: relative;right: -83%;" type="primary" size="mini" @click="requestData()">刷新</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading..."
      border
      fit
      highlight-current-row
    >
      <el-table-column label="ID" width="80">
        <template slot-scope="{row}">
          {{ row.id }}
        </template>
      </el-table-column>
      <el-table-column label="语言类型">
        <template slot-scope="{row}">
          {{ row.chapter.programming_language.title }}
        </template>
      </el-table-column>
      <el-table-column label="章节名">
        <template slot-scope="{row}">
          {{ row.chapter.chapter_name }}
        </template>
      </el-table-column>
        <el-table-column label="标题名">
        <template slot-scope="{row}">
          {{ row.title }}
        </template>
      </el-table-column>
      <el-table-column label="详细内容" show-overflow-tooltip >
        <template slot-scope="{row}">
          <div  style="cursor: pointer;" @click="show(row)">
            {{ row.content }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="160" align="center">
        <template slot-scope="{row}">
          {{ row.created_at }}
        </template>
      </el-table-column>
      <el-table-column label="更新时间" width="160" align="center">
        <template slot-scope="{row}">
          {{ row.updated_at }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="edit(row)"
            >编辑</el-button
          >
          <el-button type="danger" size="mini" @click="del(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :page.sync="listQuery.page"
      :total="total"
      :limit.sync="listQuery.limit"
      @pagination="requestData"
    />
    <!-- 添加文章详情 -->
    <el-drawer
      size=90%
      title="添加文章详情"
      :append-to-body="false"
      :visible.sync="drawer"
      :wrapperClosable="true"
      >
      <el-form :model="formAdd">
        <el-form-item label-position="top" label="语言类型">
          <el-select v-model="formAdd.programming_language_id"
              placeholder="请选择语言类型"
              @change="requestDataChapter()"
              >
            <el-option
              v-for="item in languages"
              :key="item.id"
              :label="item.title"
              :value="item.id"
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="章节标题">
          <el-select v-model="formAdd.chapter_id" placeholder="请选择章节标题">
            <el-option
              v-for="itemchapter in chapters"
              :key="itemchapter.id"
              :label="itemchapter.chapter_name"
              :value="itemchapter.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容标题">
          <el-input v-model="formAdd.title" style="width:30%;" autocomplete="false"></el-input>
        </el-form-item>
        <div >

        </div>
        <el-form-item label="文章详情">
          <!-- 富文本 -->
            <tinymce
            v-if="drawer"
            v-model="formAdd.content"
            :height="500"
            />
          </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add()">立即添加</el-button>
          <el-button @click="drawer = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <!-- 修改文章详情 -->
    <el-drawer
      size=90%
      title="修改文章详情"
      :append-to-body="false"
      :visible.sync="updateDrawer"
      :wrapperClosable="true"
      >
      <el-form :model="formUpdate">
        <el-form-item label-position="top" label="语言类型">
          <el-select v-model="formUpdate.programming_language_id"
              placeholder="请选择语言类型"
              @change="requestDataChapter()"
              >
            <el-option
              v-for="item in languages"
              :key="item.id"
              :label="item.title"
              :value="item.id"
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="章节标题">
          <el-select v-model="formUpdate.chapter_id" placeholder="请选择章节标题">
            <el-option
              v-for="itemchapter in chapters"
              :key="itemchapter.id"
              :label="itemchapter.chapter_name"
              :value="itemchapter.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容标题">
          <el-input v-model="formUpdate.title" style="width:30%;" autocomplete="false"></el-input>
        </el-form-item>
        <div >

        </div>
        <el-form-item label="文章详情">
          <!-- 富文本 -->
            <tinymce
            v-if="updateDrawer"
            v-model="formUpdate.content"
            :height="500"
            />
          </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="update()">立即修改</el-button>
          <el-button @click="updateDrawer = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <!-- 内容展示弹框 -->
    <el-dialog
      title="详情内容展示"
      :visible.sync="dialogFormVisible"
      :fullscreen="true"
      :close-on-click-modal="false"
      :show-close="false">
      <div v-html="content"></div>
        <el-button type="primary" @click="dialogFormVisible = false">关 闭</el-button>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Pagination from '@/components/Pagination/index.vue'
import { _axiosGet, _axiosRemove, _axiosPut, _axiosPost } from '@/utils/axios-request'
import Tinymce from '@/components/Tinymce/index.vue'

@Component({
  name: 'ExportZip',
  components: {
    Pagination, Tinymce
  }
})
export default class extends Vue {
  private list: any[] = [];
  private languages: any[] = [];
  private chapters: any[] = [];
  private listLoading = false;
  private dialogFormVisible = false;
  private dialogFormVisibleAdd = false;
  private drawer = false;
  private updateDrawer = false;
  private itemId = '';
  private content = '';
  private formData = {
    title: ''
  };

  private formAdd = {
    chapter_id: '',
    title: '',
    programming_language_id: '',
    content: ''
  };

  private formUpdate = {
    chapter_id: '',
    title: '',
    programming_language_id: '',
    content: ''
  };

  private listQuery = {
    page: 1,
    limit: 15,
    total: ''
  };

  private total = 0;

  private tinymceActive = true

  deactivated() {
    this.tinymceActive = false
  }

  activated() {
    this.tinymceActive = true
  }

  created() {
    this.requestData()
  }

  // 加载数据
  private requestData() {
    this.listLoading = true
    _axiosGet('/api/admin/chapterdetails', {
      limit: this.listQuery.limit,
      page: this.listQuery.page,
      include: 'chapter.programmingLanguage'
    }).then(
      (response: any) => {
        if (response.code === 0) {
          this.list = response.data
          this.total = response.meta.total
        }
        this.listLoading = false
      }
    )
  }

  // 加载 programmingLanguages 数据
  private requestDataLanguage() {
    this.listLoading = true
    _axiosGet('/api/admin/programmingLanguages')
      .then(
        (response: any) => {
          if (response.code === 0) {
            this.languages = response.data
          }
          this.listLoading = false
        }
      )
  }

  // 加载 chapters 数据
  private requestDataChapter() {
    this.listLoading = true
    _axiosGet('/api/admin/chapters', { 'filter[programming_language_id]': this.formAdd.programming_language_id })
      .then(
        (response: any) => {
          if (response.code === 0) {
            this.chapters = response.data
          }
          this.listLoading = false
        }
      )
  }

  // 添加数据
  // 编辑
  private toadd() {
    this.drawer = true
    this.requestDataLanguage()
    this.formAdd.programming_language_id = ''
    this.formAdd.chapter_id = ''
    this.formAdd.title = ''
    this.formAdd.content = ''
  }

  private add() {
    // // 添加成功后关闭
    this.drawer = false
    _axiosPost(
      '/api/admin/chapterdetails', this.formAdd
    ).then(() => {
      this.requestData()
    })
  }

  // 编辑
  private edit(row: any) {
    this.itemId = row.id
    this.formUpdate.programming_language_id = row.chapter.programming_language_id
    this.formUpdate.chapter_id = row.chapter.chapter_name
    this.formUpdate.title = row.title
    this.formUpdate.content = row.content
    this.updateDrawer = true
  }

  private update() {
    // 提交成功后关闭
    this.updateDrawer = false
    _axiosPut(
      `/api/admin/chapterdetails/${this.itemId}`,
      this.formUpdate
    ).then(() => {
      this.requestData()
    })
  }

  // 删除
  private del(row: any) {
    this.$msgbox({
      title: '删除',
      message: '此操作将永久删除该文件, 是否继续?',
      type: 'warning',
      showClose: false,
      showCancelButton: true,
      closeOnClickModal: false
    }).then(() => {
      _axiosRemove(`/api/admin/chapterdetails/${row.id}`).then(() => {
        this.requestData()
      })
    })
      .catch(() => {
        console.log('失败了')
      })
  }

  // 展示出富文本的内容 便于查看
  private show(row: any) {
    this.dialogFormVisible = true
    this.content = row.content
  }
}
</script>

<style>
.el-drawer__body {
  overflow: scroll !important;
}

.desc {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

</style>
